<template>
  <el-container>
    <el-header height="60px">
      <div class="header-content">
        <div class="header-left">
          <h1 class="site-title" @click="handleTitleClick">视频网站</h1>
          <el-menu mode="horizontal" class="header-menu" @select="handleHeaderSelect"
            :default-active="activeHeaderMenu">
            <el-menu-item index="personal-center">个人中心</el-menu-item>
            <el-menu-item index="history">历史记录</el-menu-item>
            <el-menu-item index="favorites">收藏</el-menu-item>
          </el-menu>
        </div>
        <div class="header-right">
          <el-input placeholder="搜索视频" class="search-input" v-model="searchInput" />
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-icon @click="login = true">
            <img :src="user_image" alt="登录">
          </el-icon>
        </div>
      </div>
    </el-header>
    <el-container>
      <AppAside v-if="showAside" />
      <el-main>
        <RouterView></RouterView>
      </el-main>
    </el-container>
  </el-container>
  <Login v-if="login" />
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { inject } from 'vue';
import {
  ElContainer,
  ElHeader,
  ElMain,
  ElMenu,
  ElMenuItem,
  ElInput,
  ElButton,
  ElIcon
} from 'element-plus'
import AppAside from './components/AppAside.vue'
import Login from './components/Login.vue';

const login = inject('login') || ref(false);
const user_image = inject('user_image') || ref('https://s1.mintiny.com/wlake/i/2024/10/27/85i5h.png');
const router = useRouter()

const activeHeaderMenu = ref('')
const activeSideMenu = ref('')

const showAside = ref(true)
const searchInput = ref('') // 添加响应式变量

function handleTitleClick() {
  showAside.value = true
  activeHeaderMenu.value = ''
  router.push('/') // 跳转到首页
}

function handleHeaderSelect(index) {
  activeHeaderMenu.value = index
  activeSideMenu.value = ''
  switch (index) {
    case 'personal-center':
      router.push('/personal-center')
      showAside.value = false
      break
    case 'messages':
      router.push('/messages')
      showAside.value = false
      break
    case 'history':
      router.push('/history')
      showAside.value = false
      break
    case 'favorites':
      router.push('/collect')
      showAside.value = false
      break
  }
}

function handleSearch() {
  if (searchInput.value) {
    activeHeaderMenu.value = ''
    router.push({ path: '/search', query: { q: searchInput.value } });
    showAside.value = false;
  }
}
</script>

<style scoped>
.el-header {
  background-color: #fff;
  border-bottom: 1px solid #e0e0e0;
}

.el-aside {
  background-color: #f5f7fa;
  border-right: 1px solid #e0e0e0;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0 20px;
}

.header-left {
  display: flex;
  align-items: center;
  flex: 1;
}

.header-right {
  flex: 0 0 auto;
}

.header-menu {
  flex: 1;
  display: flex;
  justify-content: flex-start;
}

.header-menu .el-menu-item {
  flex: 0 0 auto;
  padding: 0 20px;
}

.site-title {
  font-size: 1.25rem;
  font-weight: bold;
  margin-right: 1rem;
}

.search-input {
  width: 250px;
  margin-right: 0.5rem;
}

.section-title {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.featured-video {
  margin-bottom: 1rem;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.video-card,
.latest-video-card {
  margin-bottom: 1rem;
}

.video-info {
  margin-top: 0.5rem;
}

.video-title {
  font-size: 1rem;
  font-weight: 600;
}

.video-stats {
  font-size: 0.875rem;
  color: #666;
}

.latest-video-content {
  display: flex;
}

.latest-video-thumbnail {
  width: 100px;
  height: 66px;
  margin-right: 0.5rem;
}

.latest-video-info {
  flex: 1;
}

.header-right {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin-right: 40px;
}

.search-input {
  width: 250px;
  margin-right: 10px;
  /* 增加搜索框和图标之间的间距 */
}

.el-icon img {
  width: 40px;
  height: 36px;
  margin-left: 50px;
  cursor: pointer;
}
</style>